<template>
<div class="page-container">
    <div class="toolbar">
        <el-row>
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
                        <el-row style="margin-top: -20px;">
                            <el-divider content-position="center">
                                <span style="font-size:16px;font-weight:800">基本信息</span>
                            </el-divider>

                            <el-form-item label="主键" v-show="false" prop="id">
                                <el-input v-model="dataForm.id" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="部门ID" prop="deptId">
                                <el-input v-model="dataForm.deptId" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="积分类型" prop="pointType">
                               <!-- <el-select v-model="dataForm.pointType" clearable placeholder="请选择类型">
                                <el-option label="交易积分" :value="1"></el-option>
                                <el-option label="交互积分" :value="2"></el-option>
                                <el-option label="现金积分" :value="3"></el-option>
                                <el-option label="定向积分" :value="4"></el-option>
                            </el-select>-->
                              <template slot-scope="scope">
                                <el-input :value="pointType[dataForm.pointType]"></el-input>
                              </template>
                            </el-form-item>
                            <el-form-item label="发放类型" prop="deliveryType">
                              <!--<el-select v-model="dataForm.deliveryType" clearable placeholder="请选择类型">
                                <el-option label="积分卡" :value="1"></el-option>
                                <el-option label="线上" :value="2"></el-option>
                            </el-select>-->
                              <template slot-scope="scope">
                                <el-input :value="deliveryType[dataForm.deliveryType]"></el-input>
                              </template>
                            </el-form-item>
                            <el-form-item label="第三方机构ID" prop="thirdPartId">
                                <el-input v-model="dataForm.thirdPartId" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="第三方机构编码" prop="thirdPartCode">
                                <el-input v-model="dataForm.thirdPartCode" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="类型" prop="type">
                                <!--<el-select v-model="dataForm.type" clearable placeholder="请选择类型">
                                    <el-option label="新增" :value="1"></el-option>
                                    <el-option label="减少" :value="2"></el-option>
                                    <el-option label="冻结" :value="3"></el-option>
                                </el-select>-->
                              <template slot-scope="scope">
                                <el-input :value="type[dataForm.type]"></el-input>
                              </template>
                            </el-form-item>
                            <el-form-item label="描述" prop="description">
                                <el-input v-model="dataForm.description" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="数量" prop="amount">
                                <el-input v-model="dataForm.amount" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-row>
                    </el-form>
                    <div class="tool-wrap">
                        <div class="left-area">
                            <el-button-group>
                                <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
                                <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
                            </el-button-group>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-row>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';
import {
    mapState
} from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from 'v-distpicker';
import elTree from '@/views/tree/src/tree.vue'

//二.数据输出区
export default {

    //2.1 注册组件
    components: {
        jicTable,
        ThemePicker,
        LangSelector,
        VDistpicker,
        elTree,
    },

    //2.2 数据初始化区
    data() {
        return {

          pointType:['无','交易积分','交互积分','现金积分','定向积分'],

          deliveryType:['无','积分卡','线上'],

          type:['无','新增','减少','冻结'],

            //2.2.1 公共数据初始化
            searchSize: 'mini',

            // 2.2.2 form 表单数据初始化
            dataForm: {
                id: null,
                deptId: null,
                pointType: null,
                deliveryType: null,
                thirdPartId: null,
                thirdPartCode: null,
                type: null,
                description: null,
                amount: null,
                createTime: null,
                updateTime: null,
                creator: null,
                updater: null,
                deleteFlag: null,
            },
            //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
            dataFormRules: {
                id: [{
                        required: true,
                        message: "请输入主键",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                deptId: [{
                        required: true,
                        message: "请输入部门ID",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                pointType: [{
                        required: true,
                        message: "请输入积分类型（0、无；1、交易积分；2、交互积分;3、现金积分；4、定向积分；）",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                deliveryType: [{
                        required: true,
                        message: "请输入发放类型（1、积分卡；2、其他）",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                thirdPartId: [{
                        required: true,
                        message: "请输入第三方机构ID",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                thirdPartCode: [{
                        required: true,
                        message: "请输入第三方机构编码",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                type: [{
                        required: true,
                        message: "请输入类型（1、新增；2、减少；3、冻结）",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                description: [{
                        required: true,
                        message: "请输入描述",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                amount: [{
                        required: true,
                        message: "请输入数量",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                createTime: [{
                        required: true,
                        message: "请输入创建时间",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                updateTime: [{
                        required: true,
                        message: "请输入更新时间",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                creator: [{
                        required: true,
                        message: "请输入创建用户",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                updater: [{
                        required: true,
                        message: "请输入更新用户",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
                deleteFlag: [{
                        required: true,
                        message: "请输入是否删除：0不删除， 1删除 ",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 0 到 20 个字符",
                        trigger: "blur"
                    },
                ],
            },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;

        } //return 完结;
    }, //data()方法 完结;

    //2.3 Vue 方法区
    methods: {
        //2.3.1 公共方法区

        //2.请求列表数据
        getDetail() {
            let this_ = this;
            if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != '' && this.$route.query.id != 'null' && this.$route.query.id != "undefined") {
                let params = {};
                params.id = this.$route.query.id;
                this.utils.request.getConfThirdPartLogDetail(params, function (res) {
                    if (res.code === "0000") {
                        this_.dataForm = res.data;
                    } else {
                        this_.$message({
                            message: "操作失败, " + data.msg,
                            type: "error"
                        });
                    }
                });
            }
        },

        submitForm: function () {
            let this_ = this;
            this_.$refs.dataForm.validate(valid => {
                if (valid) {
                    this_.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this_.editLoading = true;
                        let params = this.dataForm;
                        this_.utils.request.saveConfThirdPartLog(params, function (res) {
                            if (res.code === "0000") {
                                this_.$message({
                                    message: "操作成功",
                                    type: "success"
                                });
                            } else {
                                this_.$message({
                                    message: "操作失败",
                                    type: "error"
                                });
                            }
                        });
                        this_.$router.go(-1);
                    });
                }
            });
        },
        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        /*图片预览*/
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        /*图片移除*/
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        back() {
            this.$router.go(-1);
        },
        //==========2.3.1 JavaScript 自定义方法区==========

    },
    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.getDetail();
    },

}
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
